<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeader('订单拆分赠送')"/>
<body>
<div class="ch-container">
    <div class="row">
        <div id="content" class="col-md-12 col-sm-12" style="padding:2px;width: 99%;">
            <div class="row">
                <div class="box col-sm-12" style="margin-top:5px;" >
                    <form class="form-horizontal" th:action="@{/order/split/gift/submit}" method="post" th:onsubmit="'return checkForm();'">
                        <fieldset>
                            <legend style="text-align: left;padding-left: 29px;"><span style="font-weight:bold;">拆分或赠送订单</span></legend>
                            <div class="form-group">
                                <div class="col-sm-2 text-right"><label>学员名称:</label></div>
                                <div class="col-sm-3" th:text="${order.loginName+'|'+order.stuName+'|'+order.enName}"></div>
                                <div class="col-sm-2 text-right"><label>套餐名称:</label></div>
                                <div class="col-sm-4" th:text="${order.packageName}"></div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-2 text-right"><label>当前使用教材:</label></div>
                                <div class="col-sm-5" th:text="${order.txtBooksName}"></div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-2 text-right"><label>总课时/币数:</label></div>
                                <div class="col-sm-2" th:text="${order.lessonCount+' '+order.currencyName}"></div>
                                <div class="col-sm-2 text-right"><label>已学课时/币数:</label></div>
                                <div class="col-sm-2" th:text="${order.strLearnedClass+' '+order.currencyName}"></div>
                                <div class="col-sm-2 text-right" ><label>剩余课时/币数:</label></div>
                                <div class="col-sm-2" th:text="${order.surplus+' '+order.currencyName}"></div>
                            </div>
                            <!--<div class="form-group">
                                <label class="control-label col-sm-2" th:text="操作方式：">操作方式:</label>
                                <div class="col-sm-5">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <button id="btnNew" type="button" class="btn btn-primary" >拆分订单</button>
                                        <button id="btnLearning" type="button" class="btn btn-default">赠送订单</button>
                                    </div>
                                </div>
                            </div>-->
                            <div class="form-group">
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>被赠与人:</label>
                                <div class="col-sm-3">
                                    <input id="loginName" name="loginName" th:value="${order.loginName}" class="form-control"  placeholder="请输入用户名称" autocomplete="off" maxlength="30" aria-describedby="inputError2Status">
                                    <input type="hidden" name="personId" id="personId" th:value="${order.personId}">
                                </div>
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>拆分课时/币数:</label>
                                <div class="col-sm-2">
                                    <input type="number" class="form-control" name="splitNum" id="splitNum" th:with="surplusClass=${#numbers.formatInteger(order.maxSplitNum,1)}" th:placeholder="${'输入大于0小于'+surplusClass+'的整数'}" th:title="${'输入大于0小于或等于'+surplusClass+'的整数'}" th:value="0" th:max="${surplusClass}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">教材类别:</label>
                                <div class="col-sm-3">
                                    <select class="form-control selectpicker" data-live-search="true" onchange="changeMaterialType('materialType2',$(this).val())">
                                        <option value="">----请选择教材类别1----</option>
                                        <option th:each="item:${material}" th:value="${item.id}" th:text="${item.categoryName}"></option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="form-control selectpicker" data-live-search="true" id="materialType2" onchange="changeMaterialType('materialType3',$(this).val())">
                                        <option value="">----请选择教材类别2---</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="form-control selectpicker" data-live-search="true" id="materialType3" onchange="changeMaterialList('materialList',$(this).val())">
                                        <option value="">----请选择教材类别3----</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>选择教材:</label>
                                <div class="col-sm-6">
                                    <select class="form-control selectpicker" data-live-search="true" name="materialId" id="materialList" onchange="changeMaterialPage('materialPageList',$(this).val())">
                                        <option value="">----请选择教材----</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="form-control selectpicker" data-live-search="true" name="materialPage" id="materialPageList" onchange="showPageImg('materialList',this)">
                                        <option value="">----请选择教材页码----</option>
                                    </select>
                                    <input type="hidden" name="materialPageName" id="materialPageName" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="orderId" th:value="${order.id}">
                                <div class="col-sm-11 text-center" >
                                    <button type="button" class="btn btn-default btn-lg" onclick="layerClose()"> 取消 </button>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="submit" class="btn btn-primary btn-lg" > 保存 </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-3" > </div>
                                <div class="col-sm-3">
                                    <div id="viewcover" style="height:200px;cursor:pointer;display:none;">
                                        <img alt="教材封面" title="查看封面" style="height:100%;border: 1px solid #999;" onclick="openImg()" onerror="$(this).attr('alt','暂无封面');$(this).attr('src','');">
                                    </div>
                                </div>
                            </div>

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustom(~{::script})">
<script>
    $(function () {
        //下拉搜索初始化
        creatSearchDiv("loginName", "personId", "/caseShareManage/personList", 26, 0, function(){

        });
        let closeStatus="[[${isClose}]]";
        if (closeStatus!=="" && closeStatus==="1"){
            layer.msg("数据保存成功", {icon: 1,shade: [0],end:function () {
                    parent.location.reload(true);
                    layerClose();
                }});
        }

        let errMsg="[[${errMsg}]]";
        if (errMsg!==""){
            layer.msg(errMsg, {icon: 2});
        }

    });

    function clearSelectOption(obj) {
        let selectObjs=$("select");
        let selectIndex=selectObjs.index(obj);
        selectObjs.each(function (index,element) {
            if (index>=selectIndex){
                let firstOption=$(element).find("option:first");
                $(element).empty();
                $(element).append(firstOption);
                $(element).selectpicker('refresh');
            }
        });
        $("#viewcover").hide();
    }
    function changeMaterialType(tagId,parentId) {
        let obj=$("#"+tagId);
        clearSelectOption(obj);
        if (parentId===""){
            return ;
        }
        if (parentId<=0){
            layer.msg("参数错误", {icon: 2});
            return false;
        }
        $.ajax({
            type:'post',
            url:'/material/type/list/'+parentId,
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status === 1 ){
                    let optionList=data.data;
                    if (optionList!=null && optionList.length>0){
                        for (let i=0;i<optionList.length;i++){
                            obj.append("<option value='"+optionList[i].id+"'>"+optionList[i].categoryName+"</option>");
                        }

                    }
                }else {
                    layer.msg(data.errMsg, {icon: 2});
                }
                obj.selectpicker('refresh');
            },
            error : function(xhr, type, exception) {
                alert(xhr.responseText, "Failed");
            }

        });
    }

    function changeMaterialList(tagId,materialType) {
        let obj=$("#"+tagId);
        clearSelectOption(obj);
        if (materialType===""){
            return ;
        }
        if (materialType<=0){
            layer.msg("参数错误", {icon: 2});
            return false;
        }
        $.ajax({
            type:'post',
            url:'/material/list/'+materialType,
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status === 1 ){
                    let optionList=data.data;
                    if (optionList!=null && optionList.length>0){
                        for (let i=0;i<optionList.length;i++){
                            obj.append("<option value='"+optionList[i].id+"' data-address='"+optionList[i].address+"'>"+optionList[i].enname+" | "+optionList[i].name+"</option>");
                        }
                    }
                }else {
                    layer.msg(data.errMsg, {icon: 2});
                }
                obj.selectpicker('refresh');
            },
            error : function(xhr, type, exception) {
                alert(xhr.responseText, "Failed");
            }
        });
    }

    function changeMaterialPage(tagId,materialId) {
        let obj=$("#"+tagId);
        clearSelectOption(obj);
        $("#viewcover").find("img").attr("src","//hkmaterials.etalk365.com/"+$("#materialList").find("option:selected").data("address")+"/1.png");
        if (materialId===""){
            return ;
        }
        if (materialId<=0){
            layer.msg("参数错误", {icon: 2});
            return false;
        }
        $.ajax({
            type:'post',
            url:'/material/page/list/'+materialId,
            cache:false,
            dataType:'json',
            success:function(data){
                $("#viewcover").show();
                if(data.status === 1 ){
                    let optionList=data.data;
                    if (optionList!=null && optionList.length>0){
                        for (let i=0;i<optionList.length;i++){
                            obj.append("<option value='"+i+"' data-name='"+optionList[i].n+"'>"+optionList[i].n.substring(0,optionList[i].n.lastIndexOf("."))+"</option>");
                        }
                    }
                }else {
                    layer.msg(data.errMsg, {icon: 2});
                }
                obj.selectpicker('refresh');
            },
            error : function(xhr, type, exception) {
                alert(xhr.responseText, "Failed");
            }
        });
    }

    function showPageImg(tagId,obj) {
        $("#materialPageName").val($(obj).find("option:selected").text());
        let address="//hkmaterials.etalk365.com/"+$("#"+tagId).find("option:selected").data("address")+"/"+$(obj).find("option:selected").data("name");
        $('#viewcover').find('img').attr('src',address);
        $("#viewcover").show();
    }

    function openImg(){
        if($("#viewcover").find("img").attr("src")!=""){
            let htmlstr = '<div class="materialsShow" style="display:none;position:fixed;width:100%;height:100%;left:0;top:0;cursor:pointer;" onclick="$(this).remove()"><img src="' + $("#viewcover").find("img").attr("src") + '" style="width:auto;height:80%;display: block;margin: 5% auto;border:1px solid #cdcdcd;"/></div>'
            $('body').append(htmlstr)
            $('.materialsShow').fadeIn('fast')
        }
    }
    let isSubmit=false;
    function checkForm() {
        let fromPersonId=[[${order.personId}]];
        let toPersonId=$("#personId").val();
        let splitGiftNum=$("#splitNum").val();
        let maxSplitGiftNum=[[${order.maxSplitNum}]];
        if (splitGiftNum===""){
            layer.msg("请输入拆分课时/币数", {icon: 2});
            $("#splitNum").select();
            return false;
        }
        if (isNaN(parseInt(splitGiftNum))){
            layer.msg("请输入拆分课时/币数大于0小于或等于"+maxSplitGiftNum+"的整数", {icon: 2});
            $("#splitNum").select();
            return false;
        }
        if (splitGiftNum>maxSplitGiftNum || splitGiftNum<=0){
            layer.msg("拆分课时/币数不能大于"+maxSplitGiftNum, {icon: 2});
            $("#splitNum").select();
            return false;
        }
        if ($("#materialList").val()===""){
            layer.msg("请选择教材", {icon: 2});
            return false;
        }
        if ($("#materialPageList").val()===""){
            layer.msg("请选择教材页码", {icon: 2});
            return false;
        }
        if (toPersonId==="" || toPersonId<=0){
            layer.msg("请选择被赠与人", {icon: 2});
            $("#loginName").select();
            return false;
        }
        if (fromPersonId!==parseInt(toPersonId) && !isSubmit){

            layer.confirm('您确认是拆分订单赠送给'+$("#loginName").val()+'吗？', {
                btn: ['是','不是'] //按钮
            }, function(){
                isSubmit=true;
                $("form").submit();
            }, function(){
                layer.msg("请重新选择被赠与人", {icon: 2});
                $("#loginName").select();
                $("#personId").val("");
                toPersonId="";
                isSubmit=false;
            });
            return isSubmit;
        }
        $("fonm button").attr("disabled",true);
    }

    //关闭弹出层
    function layerClose() {
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
</script>
</div>
</body>
</html>